<template>
	<div class="container register">
		<van-nav-bar title="注册" left-arrow @click-left="onClickLeft" /> </van-nav-bar>
		<van-cell-group>
			<van-field center placeholder="请输入手机号" clearable v-model="phone" required :error-message="message">
				<van-button slot="button" size="small" type="primary" @click="countDown"> {{content}}</van-button>
			</van-field>
			<van-field placeholder="验证码" v-model="code"/>
			<van-field type="password" placeholder="请输入密码" v-model="passwordModel" />
			<van-field type="password" placeholder="请再输入密码" v-model="passwordcheckModel" />
		</van-cell-group>
		<div class="butcon">
			<van-button tag="a" type="primary" size="large" @click="surebut">确认</van-button>
		</div>
	</div>
</template>

<script>
	import { register , codes } from '@/api/getData'
	import { Toast } from 'vant';
	export default {
		name: 'register',
		data() {
			return {
				content: '发送验证码', // 按钮里显示的内容
				totalTime: 60, //记录具体倒计时时间
				phone: this.phone,
				message:'',
				clearable:true,
				passwordModel:this.passwordModel,
				passwordcheckModel:this.passwordcheckModel,
				code:this.code			
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1);
			},
			countDown() {
				
				var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(this.phone == '') {
					this.message = '手机号错误';
				} else if(!reg.test(this.phone)) {
					this.message = '手机号错误';
				} else {
					this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
					let clock = window.setInterval(() => {
						this.totalTime--
							this.content = this.totalTime + 's后重新发送'
						if(this.totalTime < 0) { //当倒计时小于0时清除定时器
							window.clearInterval(clock)
							this.content = '重新发送验证码'
							this.totalTime = 60
						}
					}, 1000)
					codes({'phone':this.phone}).then(res =>{
              		  
              		   if(res.code == "10000"){
              		   	 Toast('已发送验证码注意查收');
              		   }
           				 
					}).catch(err =>{})
				}				
			},
			surebut(){
				if(this.passwordModel != this.passwordcheckModel){
					Toast('两次密码不匹配');
				}else{
					register({'phone':this.phone,'pwd':this.passwordModel,'code':this.code}).then(res =>{
              		   	  Toast('注册成功');
              		   	  this.$router.push('/login');
           				 
					}).catch(err =>{
						Toast(err.msg);
						this.$router.push('/login');
					})					
				}			
			}
		}
	}
</script>

<style>
	.van-field__control {
		line-height: 0.8rem;
	}
	
	.butcon {
		padding: 0.8rem 0.5rem;
	}
</style>